<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<!--<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>-->
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>个人信息</title>
		<link rel="stylesheet" href="css/base.css" />
		<!--性别的css-->
		<link rel="stylesheet" href="css/public.css">  
		<!--地区-->
		<link rel="stylesheet" href="css/ydui.css?rev=@@hash">
		<link rel="stylesheet" href="css/date.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/personal-date.css" />
		<link rel="stylesheet" href="css/all.css" />
		
	</head>

	<body>
		<div>
			<div class="head">
				<span href="javascript:;" onclick="go()">
        			<i class="iconfont icon-iconfontjiantou1"></i>
				</span>
				<h1 class="titles">个人信息</h1>
				 
			</div>
			<div class="middle">
				<div class="photo flex">
					<div>
						<span>头像</span>
					</div>
					<div class="row">
						<p class="p-r">
							<img class="photo-one" src="img/513277.png" alt="" id="personal-profile">
							<input type="file" accept="image/jpg,image/jpeg,image/png" name="file" onChange="selectImg(this,'personal-profile')" class="personal-file">
						</p>
						<i class="iconfont icon-xiangyoujiantou"></i>
					</div>

				</div>
				<div class="nickname">
					<span class="nicknames">昵称</span>
					<input type="text" placeholder="请输入昵称" class="resetUpwd-input" id="personalNickname"/>
					<i class="iconfont icon-xiangyoujiantou"></i>
				</div>
				<div class="nickname">
					<span class="nicknames">性别</span>
					<span class="resetUpwd-input" id="btn1">男</span>
					<i class="iconfont icon-xiangyoujiantou"></i>
				</div>
				 
				<div class="nickname">
        	
		            <span class="nicknames">生日</span>
		            
		            <!--<span class="resetUpwd-input kbtn" >1996.10.23</span>-->
		            <input placeholder="选择生日" id="beginTime" class="resetUpwd-input"/>
		            <i class="iconfont icon-xiangyoujiantou"></i>
		       </div>
				<div class="nickname">
		            <span class="nicknames">地区</span>
		            <input type="text" class="resetUpwd-input" readonly id="J_Address" placeholder="请现在所在地址">
		            <i class="iconfont icon-xiangyoujiantou"></i>
		        </div>
			 
				<div>
					<p class="state">个人说明</p>
					<textarea class="describe" placeholder="请输入个人说明" id="personalExplain"></textarea>
				</div>
				<div class="personal">
					<button type="button" class="personal-button">确定</button>	
				</div>
				 
			 <!--显示时间-->
		    <div id="datePlugin"></div>
		    <!--显示性别-->
    		<div class="select_box select_box1"></div>
		</div>
		<script src="js/jquery.js"></script>
		<script src="js/x_rem.js"></script>
		<!--时间-->
		<script src="js/date.js"></script>   
		<script src="js/swiper.js"></script>
		<script src="js/dyselect.js"></script>
		<!--性别-->
		<script src="js/ydui.citys.js"></script>
		<script src="js/ydui.js"></script>
		<script src="js/secondLevel.js"></script>
		<script src="js/all.js"></script>
		<script>
			//换头像
			function selectImg(file, id) {
				if(!file.files || !file.files[0]) {
					return;
				}

				var reader = new FileReader();
				reader.onload = function(evt) {
					var replaceSrc = evt.target.result;
					//更换cropper的图片
					// $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
					$("#" + id).prop("src", replaceSrc); //显示为图片的形式

					//				replaceSrc

					//ajax的参数
					var data = {
						im: replaceSrc
					}
					//成功后
					var success = () => {
						popup("头像上传成功");
					}
					//调用ajax
					Hajax("post", "/user/updatePortrait", data, success)
				}
				reader.readAsDataURL(file.files[0]);
				// base64Images.pust();	

			}

			//性别·

			$(function() {
				var hgS1 = new selectSwiper({
					el: '.select_box1',
					data: ['男', '女'],
					init: function(index) {
						if(index !== -1) {
							$('#btn1').html(this.data[index]);
						}
					},
					okFunUndefind: function() {
						alert('必须选择一项');
						return false;
					},
					okFun: function(index) {
						console.log(index);
						$('#btn1').html(this.data[index]);
					},
					closeFun: function() {
						console.log('取消');
					},
				});

				$('#btn1').on('click', function() {
					hgS1.openSelectSwiper();
				});
			});
			
			//出生年月
			
			//时间
			$(function(){
				$('#beginTime').date();
				 
			});
			
			//地区
			!function () {
				var $target = $('#J_Address');
				$target.citySelect();
				$target.on('click', function (event) {
					event.stopPropagation();
					$target.citySelect('open');
				});
				$target.on('done.ydui.cityselect', function (ret) {
					console.log(ret.provance + ' ' + ret.city + ' ' + ret.area);
					$(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
				});
			}();
	
	
//			获取资料
			(function(){
				//ajxs要传送的参数
				 var data={
				 	
				 }
				 //请求成功后调用的函数
				var success=(data)=>{
					console.log(data);
					//头像不等于空的话
					if(data.message.portrait != null){
						$("#personal-profile").attr("src",data.message.portrait);   //把头像换上去
					}
					
					if(data.message.nickName != null){
						$("#personalNickname").val(data.message.nickName);
						$("#beginTime").val(data.message.age);
						$("#J_Address").val(data.message.address);
						$("#personalExplain").val(data.message.motto);
						$("#btn1").text(data.message.sex);
					}
					
				}
				 
				 Hajax("post", "/user/getUsers", data, success)
			})();

	//保存资料
	
	$(".personal-button").click(()=>{
		if($("#personalNickname").val() == "")
			popup("昵称不能为空");	
		else if($("#beginTime").val() == "")
		 	popup("请选择生日");
		 else if($("#J_Address").val() == "")
		 	popup("请选择地址");
		 else if($("#personalExplain").val() == "")
		 	popup("个人说明不能为空");
		 else {
		 	
		 	var data ={
		 		nickName : $("#personalNickname").val(),
		 		sex :　$("#btn1").text(),
		 		age : $("#beginTime").val(),
		 		motto : $("#personalExplain").val(),
		 		address : $("#J_Address").val()
		 	};
		 	
		 	var success=(data)=>{
		 		popup(data.message);
		 	};
				
			Hajax("post","/user/updateUser",data,success);
		 }
		 
		 
		 
	})
	
	
	
	
	
	
	
	
		</script>
	</body>

</html>